<template>
  <view>
    <!-- 1. 头部搜索框 -->
    <ugo-search />
    <!-- 2. tabs 选项卡 -->
    <u-tabs :list="tabList" lineColor="#EB4450" :scrollable="false"></u-tabs>
    <!-- 3. 商品列表 -->
    <view class="goods-list">
      <!-- 商品列表渲染 -->
      <!-- 当进行链接跳转时, 将id作为路径参数传递给商品详情页面 -->
      <navigator class="goods-item" 
      :url="`/pages/goods-detail/index?goods_id=${item.goods_id}`" 
      v-for="item in goodsList" 
      :key="item.goods_id"
    >
        <image :src="item.goods_small_logo || defaultSrc" lazy-load class="goods-image" mode="aspectFit" />
        <!-- 商品信息 -->
        <view class="goods-info">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>

    <!-- 底部提示 -->
    <!-- 如果数据数组长度与数据总数相等, 代表数据加载完毕, 就显示底部提示信息 -->
    <view v-if="goodsList.length === total" class="toast">没有更多数据了~</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // params传参
      queryParams: {},
      // 商品列表
      goodsList: [],
      // 商品总数
      total: 0,
      // 顶部 tab 栏
      tabList: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
      // 默认图片
      defaultSrc: ''
    };
  },
  onLoad(options) {
    // console.log(options);
    this.queryParams = {
      ...options,
      pagenum: 1,
      pagesize: 20
    }
    this.getGoodsListRequest() // 发送请求获取商品列表
  },
  // 下拉刷新钩子函数
  async onPullDownRefresh() {
    // 重置数据
    this.queryParams.pagenum = 1
    this.goodsList = []
    this.total = 0
    // 重新发送请求渲染数据
    await this.getGoodsListRequest()
    // 等待请求获取到数据之后, 再关闭下拉刷新
    uni.stopPullDownRefresh()
  },
  // 页面触底事件钩子函数
  onReachBottom() {
    // 判断有没有下一页数据
    // 如果当前请求获取到的数据数组长度 this.goodsList.length 小于数据总数 total, 就说明下一页有数据
    // 下一页还有数据, 就先将当前页码加一, 然后再次调用函数发送请求
    if (this.goodsList.length < this.total) {
      this.queryParams.pagenum++ // 让当前页码加一
      this.getGoodsListRequest() // 重新调用函数发送请求
    } else { // 如果下一页没有数据了, 就提示用户 "到底了"
      uni.showToast({
        title: '到底了~',
        icon: 'none'
      })
    }
  },
  methods: {
    // 请求 - 商品列表搜索
    async getGoodsListRequest() {
      const res = await uni.$u.http.get('/goods/search', {
        params: this.queryParams
      })
      // console.log('商品列表', res.data.message);
      // this.goodsList = res.data.message.goods
      // 由于每次滑到底部都需要进行判断, 如果下一页还有数据, 那么就需要再次发送请求获取数据
      // 所以这里需要使用 push 方法, 将请求到的数据添加进数组 goodsList, 实现数据累加, 防止新数据覆盖旧数据
      this.goodsList.push(...res.data.message.goods)
      this.total = res.data.message.total
    }
  }
};
</script>

<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      /* 垂直方向两端对齐 */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        /* 多行超出隐藏 */
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        /* 前面的价格符号 */
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}

// 底部友好提示
.toast {
  width: 750rpx;
  height: 80rpx;
  color: #7a7a7a;
  text-align: center;
  line-height: 80rpx;
  background-color: #f1f1f1;
}
</style>